<style include="network-shared">
  cr-input {
    margin: 0 var(--cr-button-edge-spacing);
  }

  #container {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
  }

  #label {
    flex: 1;
  }

  #host {
    width: 200px;
  }

  #port {
    width: 50px;
  }
</style>
<div id="container">
  <div id="label">[[label]]</div>
  <cr-input id="host" readonly="[[!editable]]"
      aria-label="[[i18n('networkProxyHostInputA11yLabel', label)]]"
      value="{{value.host.activeValue}}" on-change="onValueChange_">
  </cr-input>
  <div>[[i18n('networkProxyPort')]]</div>
  <cr-input id="port" readonly="[[!editable]]"
      aria-label="[[i18n('networkProxyPortInputA11yLabel', label)]]"
      value="{{value.port.activeValue}}" on-change="onValueChange_">
  </cr-input>
</div>
